<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
html,body{
	height: 100%;
}
ul{transition:0.5s all ease;position: absolute;left: 0;top: 0;}
@media all and (orientation : landscape) {
	ul{
		width: 100%;
		height: 20px;
		display: -webkit-box;
		-webkit-box-orient:horizontal;
	}
	ul li{
		-webkit-box-flex:1;
		height: 100%;
	}
	ul li:nth-child(1){
		background: black;
	}
	ul li:nth-child(2){
		background: yellow;
	}
	ul li:nth-child(3){
		background: blue;
	}
	ul li:nth-child(4){
		background: pink;
	}
}
@media all and (orientation : portrait) {
	ul{
		width: 100px;
		height: 100%;
		display: -webkit-box;
		-webkit-box-orient:vertical;
	}
	ul li{
		-webkit-box-flex:1;
		width: 100%;
	}
	ul li:nth-child(1){
		background: black;
	}
	ul li:nth-child(2){
		background: yellow;
	}
	ul li:nth-child(3){
		background: blue;
	}
	ul li:nth-child(4){
		background: pink;
	}
}


    </style> 
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>